<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>
<script setup  lang="ts" name="Index">
import { mapOptions } from "@/mapConfig/config";
import { getPipeInfo } from "@/api/map/map";
import { initMap, map } from "@/utils/map";
import { Lmap } from "@/utils/lmap";
import { ElButton } from "element-plus";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { onMounted } from "vue";
import "mars3d-space";
import { format } from "echarts";
import { Cesium } from "mars3d";

import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import MapPop from "@/components/MapPop/MapPop.vue";

async function renderComponentToString() {
  const app = createSSRApp(MapPop, {
    name: "Vue 3",
    type: "primary",
    aa: "11111",
  });
  const htmlString = await renderToString(app);
  console.log(6666666666, htmlString);
  return htmlString;
}

// namespace缺失wgs84ToWindowCoordinates 和 worldToWindowCoordinates 相同
Cesium.SceneTransforms.wgs84ToWindowCoordinates =
  Cesium.SceneTransforms.worldToWindowCoordinates;
onMounted(() => {
  initMap();
  const gxLayers = map.getLayer("管线", "name");
  const gdLayers = map.getLayer("管点", "name");
  // 在图层绑定Popup弹窗
  const bindLayerPopup = (Layer) => {
    Layer.bindPopup(function (event) {
      const spoint = event.graphic.attr.spoint;
      var str = mars3d.Util.template("<div>名称：{spoint}</div>", {
        name: "火星科技",
        spoint: spoint,
      });
      return renderComponentToString();
      // return str;
    });
  };
  bindLayerPopup(gxLayers);
  bindLayerPopup(gdLayers);
});
defineExpose({ map });
</script>
  
  <style scoped lang="scss">
.mars3dContainer {
  height: 100%;
}
</style>
<style >
.mars3d-popup-background {
  background-color: #fff;
}
</style>